<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>优惠活动</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="yes" name="apple-touch-fullscreen">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no,email=no" name="format-detection">
		<!--[if lt IE 9]> 
		<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
		<![endif]-->
		<script type="text/javascript" src="../js/init.js"></script>
		<!--<link rel="stylesheet" type="text/css" href="css/home.css" />-->
		<link rel="stylesheet" type="text/css" href="../css/swiper3.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="icon" href="../images/favicon.ico" />
		<style type="text/css">
			header {
				background-color: #000;
				text-align: center;
				height: 0.88rem;
				line-height: 0.88rem;
				font-size: 0.36rem;
				color: #fff;
			}
			
			a {
				color: #000;
			}
			
			img.image {
				width: 7.5rem;
				height: 4rem;
				margin-top: -1px;
			}
			
			.contains {
				display: flex;
				flex-wrap: wrap;
				margin-top: -0.26rem;
				padding: 0.1rem;
				background-color: #eee;
			}
			
			.contains .contain {
				/*text-align: left;*/
				margin: 0.1rem 0.1rem 0.1rem 0.14rem;
				display: inline-block;
				width: 7rem;
				background-color: #fff;
				position: relative;
			}
			
			.contains .contain .theme {
				position: absolute;
				color: #fff;
				top: 0.48rem;
				left: 0.18rem;
				font-family: "楷体";
			}
			.contains .contain .theme span {
				text-align: left;
			}
			.contains .contain .theme .ch {
				font-size: 0.6rem
			}
			
			.contains .contain .theme .en {
				font-size: 0.4rem;
			}
			
			.contains .contain img {
				width: 7rem;
				height: 3rem;
			}
			
			.contains .contain span {
				display: block;
				text-align: center;
				font-size: 0.3rem;
				margin-top: -0.26rem;
				height: 0.66rem;
				line-height: 0.66rem;
			}
			.swiper-container .swiper-wrapper .lb-img{
				width: 7.5rem;
			}
			
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var mySwiper = new Swiper('.swiper-container', {
					width: window.innerWidth,
					paginationClickable: true,
					loop: true,
					autoplay: 3000,
					autoplayDisableOnInteraction: false,
					// 如果需要分页器
					pagination: '.swiper-pagination'
				})
				/*window.onresize=function(){
					
					var imgPP = document.querySelectorAll('.lb-img')
					var swiperSlide = document.querySelectorAll('.swiper-slide');
					var W = document.body.clientWidth
					for(var i=0;i<imgPP.length;i++){
						imgPP[i].style.width=W+'px';
						swiperSlide[i].style.width=W+'px';
					}
				}*/
			}
		</script>
	</head>

	<body>
		<header>优惠活动</header>
		<!--<img class="image" src="../images/2.png" alt="" />-->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img class="lb-img" src="../images/bwhb.jpg"></div>
				<div class="swiper-slide"><img class="lb-img" src="../images/drbf.jpg"></div>
				<div class="swiper-slide"><img class="lb-img" src="../images/lb51.jpg"></div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
			<span class="iconfont back"><a href="placeOrder.html">&#xe601;</a></span>
			<span class="iconfont love">&#xe602;</span>
			<span class="iconfont provide">&#xe6d2;</span>
		</div>
		<section class="contains">
			<a href="actionDetails.html">
				<div class="contain">
					<img src="../images/6.png" alt="" />
					<span>那些风一吹就散的日子</span>
					<div class="theme">
						<span class="ch">青春</span><span class="en">Youth</span>
					</div>
				</div>
			</a>
			<a href="actionDetails.html">
				<div class="contain">
					<img src="../images/4.png" alt="" />
					<span>这是最好的时代，吗？</span>
					<div class="theme">
						<span class="ch">都市</span>
						<span class="en">Modern Emotion</span>

					</div>
				</div>
			</a>
			<a href="actionDetails.html">
				<div class="contain">
					<img src="../images/5.png" alt="" />
					<span>赋予时光以生命</span>
					<div class="theme">
						<span class="ch">古風</span><span class="en">Ancientr</span>
					</div>

				</div>
			</a>
			<a href="actionDetails.html">
				<div class="contain">
					<img src="../images/7.png" alt="" />
					<span>通过认识世界来了解自己</span>
					<div class="theme">
						<span class="ch">旅行</span><span class="en">Travel</span>
					</div>

				</div>
			</a>
			<a href="actionDetails.html">
				<div class="contain">
					<img src="../images/0.png" alt="" />
					<span>赋予时光以生命</span>
					<div class="theme">
						<span class="ch">怪談</span><span class="en">The Unbelievable</span>
					</div>
				</div>
			</a>
			<a href="actionDetails.html">
				<div class="contain">
					<img src="../images/9.png" alt="" />
					<span>通过认识世界来了解自己</span>
					<div class="theme">
						<span class="ch">新鋭</span><span class="en">New Nove</span>
					</div>
				</div>
			</a>
		</section>
	</body>
	<script src="../js/swiper3.min.js"></script>

</html>